<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<style type="text/css">
           ul li{
           	  line-height: 30px;
           	  width: 200px;
           	  border: 1px solid black;
           	  background-color: aquamarine;
           }
		</style>
	</head>
	<body>
		<script type="text/javascript">
		window.onload = function(){
			var lis = document.getElementsByTagName("li");
//				for (var i=0;i<lis.length;i++) {
//					 (function(){
//					 	var p = i;
//					 	lis[i].onclick = function(){
//							alert(p);
//						}
//					 })();
//					}
//生成作用域，循环三次则生成三个作用域
              for(var i=0;i<lis.length;i++){
              	 lis[i].setAttribute("value",i);
              	 console.log(i);
              	 lis[i].onclick = function(){
              	 	var val =this.getAttribute("value");
              	 	alert(val);
              	 }
              }
//通过给每个li上绑定一个属性
       }
		</script>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</body>
</html>
